<template>
  <div class="container">
    <m-header @changeDate="handleDateChange"/>
    <div class="ctx-wrap" ref="ctxWrap">
      <chartWrap
        wrapClass="ctx-sound-group"
        title="声音变化趋势"
        iconClass="el-icon-s-data"
      >
        <div class="item-echarts item-height-500" slot="echarts">
          <themeRiverVue
            :rawData="rawData"
            :rawLegend="rawLegend"
            :xLabel="rawXLabel"
            :topicTxt="topicTxt"
            :legendData="legendData"
          />
        </div>
      </chartWrap>
      <div class="ctx-flex-item mt">
        <chartWrap
          wrapClass="flex-item-left"
          title="受众分布"
          iconClass="el-icon-pie-chart"
        >
          <div class="item-title-right" slot="titleRight">
            <el-button-group>
              <el-button
                :class="
                  audienceIndex === 0 ? 'btn-default btn-active' : 'btn-default'
                "
                @click="() => handleAudience(0)"
                >趋势</el-button
              >
              <el-button
                :class="
                  audienceIndex === 1 ? 'btn-default btn-active' : 'btn-default'
                "
                @click="() => handleAudience(1)"
                >当前</el-button
              >
            </el-button-group>
          </div>
          <div
            class="item-echarts-audience item-height-340"
            :class="audienceIndex === 1 ? 'item-right-active' : ''"
            slot="echarts"
          >
            <!-- <div class="item-echarts-left item-height-340" id="audience"></div> -->
            <lineComp
              wrapClass="item-echarts-left"
              id="audience"
              :label="audienceLabel"
              :legend="audienceLegend"
              :data="audienceData"
              @clickLegend="handleClickLegend"
            />
            <!-- <div class="item-echarts-right item-height-340" id="audience2"></div> -->
            <pieComp
              id="pieAudience"
              wrapClass="item-echarts-right"
              title="受众分布"
              :data="audiencePieData"
              @clickLegend="handleClickLegend"
            />
          </div>
        </chartWrap>

        <chartWrap
          wrapClass="flex-item-center"
          title="力量对比"
          iconClass="el-icon-s-operation"
        >
          <div
            v-if="powerIndex === 1"
            class="item-title-right"
            slot="titleRight"
          >
            <span
              class="iconfont iconiconset0441"
              @click="handlePower"
              style="cursor: pointer"
            />
          </div>
          <div class="item-echarts item-height-360" slot="echarts">
            <vbar
              wrapClass="flex-item-echarts-common"
              :class="powerIndex === 0 ? 'flex-item-echarts-active' : ''"
              id="power"
              :legend="this.powerLegend"
              :dimensions="this.powerDimensions"
              :source="this.powerSource"
              @clickBar="handleBarClick"
            />
            <div
              class="flex-item-echarts-common echarts-flex item-power-scroll"
              :class="powerIndex === 1 ? 'flex-item-echarts-active' : ''"
            >
              <div class="echarts-flex-header">
                <div class="echarts-flex-header-item"></div>
                <div
                  class="echarts-flex-header-item"
                  v-for="(item, index) in powerLegend"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
              <div class="echarts-flex-body" v-for="(item,index) in mediaDetail" :key="index">
                <div class="echarts-flex-body-item">{{item.mediaType}}</div>
                <div class="echarts-flex-body-item" v-for="(item2,index2) in item.data" :key="index2">
                  <smallPie v-if="index == 0"
                    :id='"offical"+index2'
                    :name='item2.stance+"派"'
                    :percent="item2.percent"
                    tipName="影响力"
                    :legend="item2.data"
                    :xValue="item.proportion"
                  />
                  <smallPie v-if="index == 1"
                    :id='"folk"+index2'
                    :name='item2.stance+"派"'
                    :percent="item2.percent"
                    tipName="影响力"
                    :legend="item2.data"
                    :xValue="item.proportion"
                  />
                  <smallPie v-if="index == 2"
                    :id='"self"+index2'
                    :name='item2.stance+"派"'
                    :percent="item2.percent"
                    tipName="影响力"
                    :legend="item2.data"
                    :xValue="item.proportion"
                  />
                </div>
              </div>
            </div>
          </div>
        </chartWrap>

        <chartWrap
          wrapClass="flex-item-right"
          title="平台数据分布"
          iconClass="el-icon-s-data"
        >
          <div class="item-title-right" slot="titleRight"></div>
          <!-- <div class="item-echarts item-height-360" slot="echarts" id="platform"></div> -->
          <div class="item-echarts item-height-360 item-echarts-hbar" slot="echarts">
            <hbar
              id="platform"
              :legend="ptLegend"
              :yLabel="ptYLabel"
              :yData="yData"
              @clickLegend="handleVBarClick"
            />
          </div>
        </chartWrap>
      </div>
    </div>
  </div>
</template>

<script>
import mHeader from "components/mHeader";
import chartWrap from "@/components/ChartWrap";
import themeRiverVue from "@/components/echarts/themeRiver.vue";
import echartLine from "@/components/echarts/echartLine.vue";
import pie from "@/components/echarts/pie.vue";
import vbar from "@/components/echarts/vbar.vue";
import hbar from "@/components/echarts/hbar.vue";
import smallPie from "@/components/echarts/smallPie.vue";
import "../../styles/common/index.scss";
import "./index.scss";
import { Analysis,Trend,Statistics,Distribution } from "@/api/home.js";
import { genDateForFormat } from "@/utils/index.js";

export default {
  name: "index",
  components: {
    mHeader,
    chartWrap,
    themeRiverVue,
    lineComp: echartLine,
    pieComp: pie,
    vbar,
    hbar,
    smallPie,
  },
  data() {
    return {
      audienceIndex: 0,
      powerIndex: 0,
      colors: ["#5673ff", "#ff6666", "#04d1b2", "#ab57ff"],
      rawData: [],
      rawLegend: [],
      rawXLabel: [],
      topicTxt: [],
      legendData: [],
      startDate: "",
      endDate: "",
      // audienceType: 'line', // line || pie
      audienceData: [
        {
          name: "建制",
          type: "line",
          smooth: true,
          symbol: "emptyCircle",
          symbolSize: 10,
          showSymbol: false,
          data: [],
          clip: true,
        },
        {
          name: "反对",
          type: "line",
          smooth: true,
          symbol: "emptyCircle",
          symbolSize: 10,
          showSymbol: false,
          data: [],
          clip: true,
        },
        {
          name: "不确定",
          type: "line",
          smooth: true,
          symbol: "emptyCircle",
          symbolSize: 10,
          showSymbol: false,
          data: [],
          clip: true,
        },
      ],
      audienceLabel: [],
      audienceLegend: [],
      audiencePieData: [],
      powerLegend: [],
      powerDimensions: ["powername"],
      powerSource: [],
      ptLegend: [],
      mediaDetail:[],
      ptYLabel: [],
      yData: [
        {
          name: "建制",
          value: [],
          rate:[]
        },
        {
          name: "反对",
          value: [],
          rate:[]
        },
        {
          name: "不确定",
          value: [],
          rate:[]
        },
      ],

      smLegend: ["官方媒体-", "官方媒体二", "官方媒体三"],
      folkLegend: ["民间媒体-", "民间媒体二", "民间媒体三"],
    };
  },
  async mounted() {
    this.getTrend();//声量变化趋势数据
    this.getStatistics();//受众分布
    this.getAnalysis();//媒体力量对比
    this.getDistribution();//平台数据分布
  },
  methods: {
    
    async getTrend(){
      let { data } = await Trend();
      this.rawLegend.push(...data.rawLegend)
      this.rawXLabel.push(...data.xlabel)
      this.topicTxt.push(...data.voices)
      this.legendData.push(...data.total)

     
      let [arr1,arr2,arr3,arr4] = [[],[],[],[]]
      for(let i=0;i<data.rawData.length;i++){
        arr1.push(data.rawData[i][0])
        arr2.push(data.rawData[i][1])
        arr3.push(data.rawData[i][2])
        arr4.push(data.rawData[i][3])
      }
      this.rawData.push(arr1,arr2,arr3,arr4)
    },
    async getStatistics(){
      let { data } = await Statistics();
      this.audienceLabel.push(...data.label)
      this.audiencePieData.push(...data.current)
      let arr1=[],arr2=[],arr3=[] 
      let rawDataNew = this.setPercentage(data.rawData)
      for(let i=0;i<rawDataNew.length;i++){
        arr1.push(rawDataNew[i][0])
        arr2.push(rawDataNew[i][1])
        arr3.push(rawDataNew[i][2])
      }
      this.audienceData[0].data.push(...arr1)
      this.audienceData[1].data.push(...arr2)
      this.audienceData[2].data.push(...arr3)
    },
    async getDistribution(){
      let { data } = await Distribution();
      for(let i=0;i<data.data.length;i++){
        if(i >= 10) break
        this.ptYLabel.push(data.data[i].platform)
        this.yData[0].rate.push(Number(data.data[i].data[0].rate.slice(0,-1)))
        this.yData[1].rate.push(Number(data.data[i].data[1].rate.slice(0,-1)))
        this.yData[2].rate.push(Number(data.data[i].data[2].rate.slice(0,-1)))
        this.yData[0].value.push(data.data[i].data[0].value)
        this.yData[1].value.push(data.data[i].data[1].value)
        this.yData[2].value.push(data.data[i].data[2].value)
      }
    },

    async getAnalysis() {
      let { data } = await Analysis();
      this.powerLegend.push(...data.legend);
      this.audienceLegend.push(...data.legend);
      this.ptLegend.push(...data.legend);
      this.powerDimensions.push(...data.legend);
      let baifenbi = this.setPercentage(data.source)
      this.powerSource.push({
        'powername': "总体",
        '建制': baifenbi[0][0],
        '反对': baifenbi[0][1],
        '不确定': baifenbi[0][2],
      });
      this.mediaDetail = data.mediaDetail
      let mediaDetail = data.mediaDetail
      for (let i = 0; i < mediaDetail.length; i++) {
        let jData = mediaDetail[i].data
        this.powerSource.push({
          'powername': mediaDetail[i].mediaType,
          [jData[0].stance]: baifenbi[i + 1][0],
          [jData[1].stance]: baifenbi[i + 1][1],
          [jData[2].stance]: baifenbi[i + 1][2],
        });
        this.mediaDetail[i].proportion = data.source[i+1]
        for(let j=0;j<jData.length;j++){
          this.mediaDetail[i].data[j].percent = baifenbi[i + 1][j]
        }
      }
    },
    
    setPercentage(data) {
      //设置百分数
      let baifenbi = [];
      for (let j = 0; j < data.length; j++) {
        let sum = data[j].reduce((sum, num) => {
          return sum + num;
        }, 0);
        let dataList = [];
        data[j].forEach((item) => {
          let num = (item / sum) * 100;
          num = Number(num.toFixed(2));
          dataList.push(num);
        });
        baifenbi.push(dataList);
      }
      return baifenbi
    },
   
   handleResize(myChart) {
      window.onresize = function () {
        myChart.resize();
      };
    },
    handleAudience(val) {
      this.audienceIndex = val;
    },
    handlePower() {
      this.powerIndex = 0;
    },
    handleDateChange(date){//时间选择
      console.log(date)
      console.log(new Date().getTime(date[0]),new Date().getTime(date[1]))
    },
    handleClickLegend(name) {
      window.location.href = `/swipe.html?subTitle=${name}`;
    },
    handleBarClick(name) {
      // window.location.href = `/power.html?pubTitle=${name}`;
      this.powerIndex = 1;
    },
    handleVBarClick(name) {
      window.location.href = `/swipe.html?subTitle=${name}`;
    },
  },
};
</script>
